import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:short_video_app/utils/color_util.dart';
import 'package:short_video_app/ui/pages/home/follow_video_list_page.dart';
import 'package:short_video_app/ui/pages/home/recommend_video_list_page.dart';
import 'package:short_video_app/view_model/home/home_view_model.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (BuildContext context) => HomeViewModel(vsync: this),
      child: Consumer<HomeViewModel>(builder: (context, viewModel, child) {
        return Scaffold(
          body: _buildContent(viewModel),
        );
      }),
    );
  }

  Widget _buildContent(HomeViewModel viewModel) {
    return Stack(
      children: [
        _buildTabView(viewModel),
        _buildTabBar(viewModel),
      ],
    );
  }

  /// TabBar 对应的视图
  Widget _buildTabView(HomeViewModel viewModel) {
    List<Widget> tempList = const [
      RecommendVideoListPage(),
      FollowVideoListPage()
    ];
    return TabBarView(
      controller: viewModel.tabController,
      children: tempList,
    );
  }

  /// 顶部 TabBar
  Widget _buildTabBar(HomeViewModel viewModel) {
    return SizedBox(
      width: double.infinity,
      height: 84,
      child: Stack(
        children: [
          Positioned(
            left: 0,
            bottom: 0,
            right: 0,
            height: 45,
            child: Center(
              child: TabBar(
                controller: viewModel.tabController,
                indicatorColor: ColorsUtil.COLOR_FFFFFF,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorWeight: 2.0,
                isScrollable: true,
                labelColor: ColorsUtil.COLOR_FFFFFF,
                unselectedLabelColor: ColorsUtil.COLOR_AAAAAA,
                labelStyle: const TextStyle(fontSize: 16, height: 2, fontWeight: FontWeight.w500),
                unselectedLabelStyle: const TextStyle(fontSize: 16, height: 2, fontWeight: FontWeight.w500),
                tabs: viewModel.tabs.map((e) {
                  return Text(e);
                }).toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
